var timerId = null;
$(document).ready(function() {
	loadCalendar();
	drawChart();
	updateProgress();
	// setUserImg();
	loadBullitenBoard();

});

function loadCalendar() {
	$('#calendar').fullCalendar({
		header : {
			left : 'prev,next today',
			center : 'title',
			right : 'month,basicWeek,basicDay'
		},
		editable : false,
		events : function(start, end, callback) {
			var events = getEventData();
			callback(events);
		}
	});

}
function getEventData() {
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	var eventData = [ {
		title : 'All Day Event',
		start : new Date(y, m, 1)
	}, {
		title : 'Long Event',
		start : new Date(y, m, d - 5),
		end : new Date(y, m, d - 2)
	}, {
		id : 999,
		title : 'Repeating Event',
		start : new Date(y, m, d - 3, 16, 0),
		allDay : false
	}, {
		id : 999,
		title : 'Repeating Event',
		start : new Date(y, m, d + 4, 16, 0),
		allDay : false
	}, {
		title : 'Meeting',
		start : new Date(y, m, d, 10, 30),
		allDay : false
	}, {
		title : 'Lunch',
		start : new Date(y, m, d, 12, 0),
		end : new Date(y, m, d, 14, 0),
		allDay : false
	}, {
		title : 'Birthday Party',
		start : new Date(y, m, d + 1, 19, 0),
		end : new Date(y, m, d + 1, 22, 30),
		allDay : false
	}, {
		title : 'Click for Google',
		start : new Date(y, m, 28),
		end : new Date(y, m, 29),
		url : 'http://google.com/'
	} ];
	return eventData;
}
function drawChart() {

	var data = "";
	var order = [ 0, 1, 2 ], i = 0, xFormat = d3.time.format('%A'), rotateTimer, chart, t = 5000;
	$
			.getJSON(
					'resources/app/js/chartData.json',
					function(result) {
						data = result;

						if ($("#xchart-sine").length > 0) {
							if (data && data.length > 0) {
								chart = new xChart('bar', data[order[i]],
										'#xchart-sine', {
											axisPaddingTop : 5,
											paddingLeft : 30,
											dataFormatX : function(x) {
												return new Date(x);
											},
											tickFormatX : function(x) {
												return d3.time.format('%a')(x);
											}
										});
								rotateTimer = setTimeout(rotateChart, t);
							} else {
								$("#xchart-sine")
										.html(
												"<div Style='min-height: inherit;line-height:170px;text-align:center;'>Configure charts on dashboard using <i class='fa fa-cog'></i></div>");

							}

						}
					});

	function updateChart(i) {
		chart.setData(data[i]);
	}

	function rotateChart() {
		i += 1;
		i = (i >= order.length) ? 0 : i;
		updateChart(order[i]);
		rotateTimer = setTimeout(rotateChart, t);
	}
	$("#btnStopTimer").click(function() {
		if (rotateTimer) {
			clearTimeout(rotateTimer);
			rotateTimer = null;
			$(this).find("i").removeClass("fa-pause");
			$(this).find("i").addClass("fa-play");
		} else {
			rotateTimer = setTimeout(rotateChart, 1000);
			$(this).find("i").removeClass("fa-play");
			$(this).find("i").addClass("fa-pause");
		}
	});

	$("#btnPrevChart").click(function() {
		
		i -= 1;
		i = (i <= -1) ?  order.length-1 : i;
		updateChart(order[i]);
	});
	$("#btnNextChart").click(function() {
		i += 1;
		i = (i >= order.length) ? 0 : i;
		updateChart(order[i]);
	});

}

function updateProgress() {
	$("[data-percent]").each(function() {
		return $(this).css({
			width : "" + ($(this).attr("data-percent")) + "%"
		});
	});
}
function loadBullitenBoard() {
	$.getJSON("loadBullitenBoard.htm?topOnly=true", function(data) {
		var lines = "";
		$.each(data, function(idx, ele) {
			var date = ele.date.split("-");
			lines += "<div class='box-section news with-icons'>";
			lines += "<div class='" + ele.avatarClass + "'><i class='"
					+ ele.iconClass + "'></i></div>";
			lines += "<div class='news-time'><span>" + date[0] + "</span> "
					+ date[1] + "</div>";
			lines += "<div class='news-content'>";
			lines += "<div class='news-title'>";
			lines += "<a href='#'>" + ele.title + "</a>";
			lines += "</div>";
			lines += "<div class='news-text'>" + ele.text + "</div>";
			lines += "</div></div>";
		});
		$("#bullitenContent").html(lines);
	});

}
